<template>
  <div>
    姓： <input type="text" v-model="firstName" /> 名：<input
      type="text"
      v-model="lastName"
    />
    <!-- 不要直接在插值表达式中写过多的逻辑，这样会让模板变得很笨重，不方便维护 -->
    <!-- <p>全名是：{{firstName + lastName}}</p> -->
    <p>函数实现全名是：{{ getFullname() }}</p>
    <p>函数实现全名是：{{ getFullname() }}</p>
    <p>函数实现全名是：{{ getFullname() }}</p>
    <p>函数实现全名是：{{ getFullname() }}</p>

    <p>计算属性实现全名是：{{ fullName }}</p>
    <p>计算属性实现全名是：{{ fullName }}</p>
    <p>计算属性实现全名是：{{ fullName }}</p>
    <p>计算属性实现全名是：{{ fullName }}</p>

    <!-- <button @click="change">点击改变computed的值</button> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      firstName: "zhang",
      lastName: "三",
    };
  },
  // 计算属性computed 根据data中已有的数据，计算得到有一个新的数据
  // 计算属性是 依赖data中已有的数据进行缓存的。性能好
  computed: {
    // 函数名可以直接当成一个变量使用
    fullName() {
      console.log('计算属性执行了');
      // 必须写return
      return this.firstName + this.lastName;
      
    },
  },
  // computed: {
  //   fullName: {
  //     // getter
  //     get: function () {
  //       return this.firstName + " " + this.lastName;
  //     },
  //     // setter
  //     set: function (newValue) {
  //       var names = newValue.split(" ");
  //       this.firstName = names[0];
  //       this.lastName = names[names.length - 1];
  //     },
  //   },
  // },
  methods: {
    change() {
      this.fullName = '张 三丰'
    },
    getFullname() {
      console.log("函数执行了");
      return this.firstName + this.lastName;
    },
  },
};
</script>
<style>
</style>